import React, { useEffect, useState } from 'react'
import { Button, Table, Popconfirm } from 'antd';
import { getPersons, removePersons } from '../../api/modules/person'

import './Tables.scss'
export default function Tables() {
    const [data, setData] = useState([])
    const columns = [
        {
            title: 'Name',
            dataIndex: 'name',
            render: (text) => <a>{text}</a>
        },
        {
            title: 'Age',
            dataIndex: 'age',
        },
        {
            title: 'Address',
            dataIndex: 'address',
        },
        {
            title: 'Actve',
            dataIndex: 'active',
            render: (_, record) => <Popconfirm onConfirm={() => {
                // console.log(123);
                removePersons(record.id).then(res => {
                    setData(res.data)
                })
            }} title='确认删除嘛'>
                <a>删除</a>
            </Popconfirm>
        },
    ];
    useEffect(() => {
        async function fetchData() {
            let res = await getPersons()
            if (res.code == 0) {
                setData(res.data)
            }
        }
        fetchData()
    }, [])
    return (
        <div className='table' >
            <div className='button'>
                <Button type='primary'>新增+</Button>
            </div>

            <Table columns={columns} dataSource={data} size="middle" />

        </div>
    )
}
